import React, { Component } from "react";
// PropTypes用于做props的类型检查的
// import PropTypes from "prop-types";
import { string, number, oneOfType } from "prop-types";

// https://www.npmjs.com/package/prop-types
/*
  optionalArray: PropTypes.array,
  optionalBigInt: PropTypes.bigint,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  requiredFunc: PropTypes.func.isRequired,
  requiredAny: PropTypes.any.isRequired,
*/

class Child1 extends Component {
  static propTypes = {
    name: string.isRequired,
    age: oneOfType([number, string]),
  };

  render() {
    const { name, age } = this.props;
    return (
      <div>
        child1组件 - {name} - {age}
      </div>
    );
  }
}
// Child1.propTypes = {
//   name: PropTypes.string,
//   age: PropTypes.number,
// };

const Child2 = ({ count }) => {
  return <div>child2组件 - {count}</div>;
};

class App extends Component {
  render() {
    return (
      <>
        <h2>props的数据类型检查</h2>
        <Child1 name="zhangsan" age={20} />
        <Child2 count="10" />
      </>
    );
  }
}

export default App;
